import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Theme, ThemeEnum } from '@interfaces';

const initialState: Theme = {
  theme: ThemeEnum.Light,
}

export const THEME_FEATURE_KEY = 'theme';

document.body.className = `${initialState.theme}-theme`;

const themeSlice = createSlice({
  name: THEME_FEATURE_KEY,
  initialState,
  reducers: {
    setTheme (state: Theme, action: PayloadAction<ThemeEnum>) {
      state.theme = action.payload; // 不需要返回
    },
    // setTheme : {
    //   reducer: (state, action) => {
    //     state.theme = action.payload;
    //   },
    //   // 预处理
    //   prepare: (theme) => {
    //     console.log('log...')
    //     return {
    //       payload: {
    //         theme,
    //       }
    //     }
    //   },
    // },
    getTheme (state) {
      return state;
    }
  },
})

export const {
  setTheme,
  getTheme,
} = themeSlice.actions;

export default themeSlice.reducer;
